<template>
  <div class="chart-container" style="padding: 0 20px;margin: 0 20px">
    <!-- 第一行图表 -->
    <div class="chart-row">
      <div ref="chartRef" class="chart-box"></div>
      <div ref="chartRef2" class="chart-box"></div>
    </div>
    <!-- 第二行图表 -->
    <div class="chart-row">
      <!-- 第三个图表和按钮 -->
      <div class="chart-box">
        <div ref="chartRef3" class="chart-content"></div>
        <div class="button-group">
          <el-dropdown @command="handleDepartmentChange" class="dropdown">
            <span class="el-dropdown-link">
              选择部门
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item v-for="(item, index) in departments" :key="index" :command="item.name">
                  {{ item.name }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      <div ref="chartRef4" class="chart-box"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';
import { ArrowDown } from '@element-plus/icons-vue'
import axios from "axios";

const chartRef = ref(null);
const chartRef2 = ref(null);
const chartRef3 = ref(null);
const chartRef4 = ref(null);
let chartInstance = null;
let chartInstance2 = null;
let chartInstance3 = null;
let chartInstance4 = null;
const chartType = ref([]);
const chartData = ref([]);
const chartData2 = ref([{
  value: 1,
  name: '数据加载中'
}]);
const chartData3 = ref([]);
const chartData4 = ref([]);
const departments = ref([]);  // 存储部门信息
const currentDepartmentName = ref("");

// 初始化用户统计图表
const initChart = () => {
  if (!chartInstance) {
    chartInstance = echarts.init(chartRef.value);
  }
  const option = {
    color: ['#73c0de'],
    title: {
      text: '用户统计'
    },
    tooltip: {},
    legend: {
      data: ['人数']
    },
    xAxis: {
      data: chartType.value
    },
    yAxis: {},
    series: [{
      name: '人数',
      type: 'bar',
      data: chartData.value
    }]
  };
  chartInstance.setOption(option);
};

// 初始化部门统计图表
const initChart2 = () => {
  if (!chartInstance2) {
    chartInstance2 = echarts.init(chartRef2.value);
  }
  const option = {
    title: {
      text: '部门员工统计'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'right'
    },
    series: [{
      name: '人数',
      type: 'pie',
      radius: '70%',
      data: chartData2.value
    }]
  };
  chartInstance2.setOption(option);
};

// 初始化职位统计图表
const initChart3 = () => {
  if (!chartInstance3) {
    chartInstance3 = echarts.init(chartRef3.value);
  }
  const option = {
    title: {
      text: '职位员工统计'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'right'
    },
    series: [{
      name: '人数',
      type: 'pie',
      radius: '70%',
      data: chartData3.value
    }]
  };
  chartInstance3.setOption(option);
};

// 初始化本月考勤统计图表
const initChart4 = () => {
  if (!chartInstance4) {
    chartInstance4 = echarts.init(chartRef4.value);
  }
  const option = {
    title: {
      text: '本月考勤统计'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'right'
    },
    series: [{
      name: '人次',
      type: 'pie',
      radius: '70%',
      data: chartData4.value
    }]
  };
  chartInstance4.setOption(option);
};

// 调整图表大小
const resizeChart = () => {
  if (chartInstance) {
    chartInstance.resize();
  }
  if (chartInstance2) {
    chartInstance2.resize();
  }
  if (chartInstance3) {
    chartInstance3.resize();
  }
  if (chartInstance4) {
    chartInstance4.resize();
  }
};

// 获取用户统计数据
const getUserECharts = () => {
  axios.get("http://localhost:8080/admin/getUserEcharts").then((res) => {
    chartType.value = res.data.data.chartType;
    chartData.value = res.data.data.chartData;
    initChart(); // 重新初始化图表以应用新的数据
  });
};

// 获取部门统计数据
const getDepartmentECharts = () => {
  axios.get("http://localhost:8080/admin/getDepartmentEcharts").then((res) => {
    chartData2.value = res.data.data;
    departments.value = res.data.data;  // 假设接口返回了部门信息
    initChart2();
  });
};

// 获取职位统计数据
const getPositionECharts = (departmentName) => {
  axios.get(`http://localhost:8080/admin/getPositionEcharts?departmentName=${departmentName}`).then((res) => {
    chartData3.value = res.data.data;
    initChart3();  // 更新职位统计图表
  });
};
const getAttendanceECharts = () => {
  axios.get(`http://localhost:8080/admin/getAttendanceEcharts`).then((res) => {
    chartData4.value = res.data.data;
    initChart4();  // 更新职位统计图表
  });
};
// 处理下拉菜单选择部门
const handleDepartmentChange = (departmentName) => {
  currentDepartmentName.value = departmentName;
  getPositionECharts(departmentName);  // 根据选择的部门请求职位统计数据
};

onMounted(() => {
  window.addEventListener('resize', resizeChart);
  getUserECharts();
  getDepartmentECharts();
  getAttendanceECharts();
});

onBeforeUnmount(() => {
  if (chartInstance) {
    chartInstance.dispose();
  }
  window.removeEventListener('resize', resizeChart);
});
</script>

<style scoped>
.chart-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin: 20px;
}

.chart-row {
  display: flex;
  justify-content: space-around;
  gap: 20px;
  width: 100%;
}

.chart-box {
  width: 45%;
  height: 300px;
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.chart-content {
  flex: 1;
  width: 100%;
}

.button-group {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  padding: 10px 0;
  border-top: 1px solid #eee;
  width: 100%;
}

.el-dropdown-link {
  color: #0984e3;
  font-size: medium;
  cursor: pointer;
}

.dropdown {
  text-align: center;
}

.el-button {
  margin-top: 0;
}
</style>